<template>
  <div style="width: 100%;overflow: scroll;background-color: rgb(105, 190, 153)">
    <!--嵌套路由-->
    <div class="main_menu_items">
      <p class="main_items">
        <span class="two">图像</span>
        <span class="one">病历号</span>
        <span class="one">用户</span>
        <span class="one">模式</span>
        <span class="two">时间</span>
        <span class="one">状态</span>
        <span class="one">操作</span>
      </p>
      <div class="history_items">
        <p v-for="item in local">
        <span class="two history_items_img">
          <img v-bind:src="item.leftSrc" alt="" @click="preview(item.leftSrc)" v-if="item.leftSrc">
          <img v-bind:src="item.rightSrc" alt="" @click="preview(item.rightSrc)" v-if="item.rightSrc">
        </span>
          <span class="one">{{item.userId}}</span>
          <!--<span class="one"><input type="text" v-model="item.userName">{{item.userName}}</span>-->
          <span class="one history_items_username"><input type="text" v-model="item.userName"></span>
          <span class="one" @click="changeType(item)">{{item.type==0?'左眼':'右眼'}}</span>
          <span class="two">{{item.time}}</span>
          <span class="one" v-if="item.status==0">未开始</span>
          <span class="one" v-if="item.status==2">正在筛查</span>
          <span class="one" v-if="item.status==1">筛查完成</span>

          <!--<span class="one progress_style"><progress-bar-->
            <!--:percent="item.percent"></progress-bar></span>-->

          <span class="one">
            <em style="font-style: normal" @click="upload(item)" v-if="item.percent<100">开始</em>
            <em style="text-decoration: underline;color: rgb(33,59,147);font-style: normal"
                @click="getDetail(item)" v-if="item.percent==100">查看</em>
            <!--<em style="font-style: normal;text-decoration: underline;color: rgb(33,59,147)">查看</em>-->
            <!--<em style="font-style: normal">删除</em>-->
          </span>
        </p>

        <!--<p>-->
        <!--<span class="two">-->
        <!--<img src="../../../assets/image/left.jpg" alt="" @click="preview(require('../../../assets/image/wx.png'))">-->
        <!--<img src="../../../assets/image/right.jpg" alt="">-->
        <!--</span>-->
        <!--<span class="one">666</span>-->
        <!--<span class="one">newuser</span>-->
        <!--<span class="one">双眼</span>-->
        <!--<span class="two">2018-06-13 17：13</span>-->
        <!--<span class="one progress_style"><progress-bar-->
        <!--:percent="percentage"></progress-bar></span>-->
        <!--<span class="one">查看</span>-->
        <!--</p>-->
      </div>
    </div>
    <!--<img :src="imgUrl" alt="">-->
    <previewer :img-url="imgUrl" @pre-close="close" :is-show="isShow"></previewer>
    <!--<pagination @go-page="pageChange" :length="length" class="pagination"></pagination>-->
  </div>
</template>

<script>
  import event from './event'
  import pagination from '../../../components/pagination'
  import progressBar from '../../../components/progress'
  import previewer from '../../../components/previewer'
  import axios from 'axios'
  import {apiPre} from "../../../assets/js/config";

  // const apiPre = 'http://192.168.1.103:3001/';

  export default {
    name: "history",
    components: {
      pagination,
      progressBar,
      previewer
    },
    data() {
      return {
        local: [],
        length: 50,
        percentage: 50,
        imgUrl: require("../../../assets/image/wx.png"),
        isShow: false,
        historyItems: [
          {
            leftSrc: require('../../../assets/image/left.jpg'),
            rightSrc: require('../../../assets/image/right.jpg'),
            userId: '8801',
            userName: 'user1',
            type: '双眼',
            time: '2018-06-13 17：13',
            percent: 100
          },
          {
            leftSrc: require('../../../assets/image/1.jpg'),
            rightSrc: require('../../../assets/image/2.jpg'),
            userId: '8802',
            userName: 'user2',
            type: '双眼',
            time: '2018-06-13 17：13',
            percent: 100
          },
          {
            leftSrc: require('../../../assets/image/3.jpg'),
            rightSrc: require('../../../assets/image/4.jpg'),
            userId: '8803',
            userName: 'user3',
            type: '双眼',
            time: '2018-06-13 17：13',
            percent: 100
          }
        ]
      }
    },
    watch: {
      local: () => {
        console.log('local change')
      }
    },
    methods: {
      getDetail(item) {
        console.log('process.env.NODE_ENV', process.env.NODE_ENV);
        if (process.env.NODE_ENV === 'development') {
          window.open('http://localhost:8080/#/detail/' + item.id + '/' + item.userId);
        } else {
          // window.open('http://192.168.1.103/dist/#/detail/' + item.id + '/' + item.userId);  //本地部署环境
          window.open('http://202.197.66.62:20511/#/detail/' + item.id + '/' + item.userId);
        }

        // window.localStorage.setItem('storageItem',this.historyItems);
        // window.open('http://localhost:8080/#/detail/'+num,'','height=500, width=700, top=100, left=200,toolbar=no, ' +
        //   'menubar=no, scrollbars=no, resizable=no, location=no, status=no');
      },
      pageChange(param) {
        console.log(param);
      },
      add() {
        this.percentage++;
      },
      preview(url) {
        this.isShow = true;
        this.imgUrl = url;
      },
      close() {
        this.isShow = false;
      },
      changeType(item) {
        if (item.type == 0) {
          item.type = 1;
        } else {
          item.type = 0;
        }
      },
      upload(src) {

        src.status = 2;
        let interVal = setInterval(() => {
          src.percent++;
          // console.log(src.status)
          if (src.percent >= 100) {
            clearInterval(interVal);
          }
        }, 200)

        // console.log('pre src',src);

        axios.get(apiPre + 'getId', {params: {userId: src.userId}}).then((res) => {
          console.log('get id', res.data);
          src.id = res.data.data.id;
          // console.log('after src',src);

          axios.put(apiPre + 'screening', {data: src}).then((res) => {
            console.log('put status', res);
            clearInterval(interVal);
            src.percent = 100;
            src.status = 1;
          }).catch((err) => {
            console.log('err status', err);
          })
        }).catch((err) => {
          console.log('id err', err);
        })

        // console.log('upload src', src);
        // axios.post('http://192.168.1.104:3001/screening', {data: src}, {
        //   headers: {
        //     'Content-Type': 'application/json',
        //   },
        //   dataType: 'json'
        // }).then((res) => {
        //   console.log('upload res', res);
        // }).catch((err) => {
        //   console.log('upload err', err);
        // })
      }
    },
    created: function () {

      // console.log(parseInt(Math.random() * 100000));

      axios.get(apiPre + 'getHistory').then((res) => {
        // console.log('history res', res.data);
        this.local = res.data;
      }).catch((err) => {
        console.log(err);
      })

      // event.$on('clearItems',()=>{
      //   console.log('ok');
      //   this.historyItems=[];
      // })
      // console.log(window.localStorage.getItem('storageItem'));
      // console.log('created');
      window.localStorage.setItem('storageItem', JSON.stringify(this.historyItems));
      // this.local = JSON.parse(window.localStorage.getItem('storageItem'));
      // console.log(this.$router);
    },
    mounted: function () {
      // console.log('this.$route.params.num', this.$route)
      let interVal = setInterval(() => {
        this.add()
        if (this.percentage == 100) {
          clearInterval(interVal);
        }
      }, 1000)

      //监听删除列表事件
      event.$on('clearItems', () => {
        // console.log('ok dadsdsds');
        this.local = [];
      })

      event.$on('upload', (data) => {
        console.log('upload dadssdsds', data);
        this.local = this.local.concat(data);

        axios.post(apiPre + 'screening', {data: data}, {
          headers: {
            'Content-Type': 'application/json',
          },
          dataType: 'json'
        }).then((res) => {
          console.log('upload res', res);
        }).catch((err) => {
          console.log('upload err', err);
        })

        // event.$off('upload');

      })

      // axios.get('/api/history').then((res) => {
      //   console.log('axios data', res.data);
      // }).catch((err) => {
      //   console.log('api error', err)
      // })

      // axios.get(apiPre + 'users').then((res) => {
      //   console.log('express res', res);
      //   this.imgUrl = res.data;
      // }).catch((err) => {
      //   console.log('express err', err);
      // })
    },
    beforeDestroy() {
      event.$off('upload');

      // console.lg('beforeDestroy')
    }
  }
</script>

<style lang="scss">
  @import "../main";

  .pagination {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }

  .progress_style {
    .progress_wrapper {
      /*background-color: rgb(219, 180, 104);*/
      .progress_line {
        width: 75%;
      }
    }
  }

  .history_items_username {
    input {
      border-width: 1px;
      text-align: center;
    }
  }
</style>
